import React from "react";
import {Button, Table, Tooltip} from 'antd';
import {connect} from "react-redux";
import {liveVideoClose, openLiveVideo, queryAction} from "../actions/LiveAction";
import {YoutubeOutlined} from "@ant-design/icons";
import {Live} from "../components/Live";

class LivePage extends React.Component {

  constructor(props) {
    super(props);
    this.columns = [
      {
        title: '应用',
        dataIndex: 'app',
        key: 'app',
      },
      {
        title: '推流码',
        dataIndex: 'stream',
        key: 'stream',
      },
      {
        title: '状态',
        dataIndex: 'push_flag',
        key: 'push_flag',
        render: (record) => {
          return record === 1 ? '在线' : '离线'
        }
      },
      {
        title: '查看',
        key: 'watch',
        render: (record) => {
          return <div>
            <Tooltip title="查看">
              <Button type="primary" shape="circle" icon={<YoutubeOutlined/>}
                      disabled={record.push_flag !== 1}
                      onClick={() => {
                        this.props.openLiveVideo(record)
                      }}
              />
            </Tooltip>
          </div>
        }
      },
    ]
  }

  UNSAFE_componentWillMount() {
    this.props.query()
  }


  render() {
    return <div>
      <Table columns={this.columns} dataSource={this.props.liveInfoList}/>
      <Live {...this.props}/>
    </div>
  }
}

const mapStateToProps = (state) => {
  return {
    liveInfoList: state.liveReducer.liveInfoList,
    liveVideoVisible: state.liveReducer.liveVideoVisible,
    videoRecord: state.liveReducer.videoRecord
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    query: () => dispatch(queryAction()),
    openLiveVideo: (record) => dispatch(openLiveVideo(record)),
    liveVideoClose: () => dispatch(liveVideoClose())
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LivePage)